<!-- components/setting-item.vue -->
<template>
    <div class="setting-item" :class="itemClasses">
      <!-- 🎯 设置项标签区域 -->
      <div class="setting-label">
        <span class="label-text">{{ label }}</span>
        <slot name="suffix"></slot>  <!-- 标签后缀插槽 -->
        
        <!-- 🎯 帮助提示 -->
        <el-tooltip v-if="tooltip" :content="tooltip" placement="top">
          <el-icon class="help-icon"><QuestionFilled /></el-icon>
        </el-tooltip>
      </div>
      
      <!-- 🎯 设置控件区域 -->
      <div class="setting-control">
        <slot></slot>  <!-- 设置控件插槽 -->
      </div>
    </div>
  </template>
  
  <script setup>
  import { computed } from 'vue'
  import { QuestionFilled } from '@element-plus/icons-vue'
  
  // 🎯 Props
  const props = defineProps({
    label: {
      type: String,
      required: true
    },
    tooltip: {
      type: String,
      default: ''
    },
    vertical: {
      type: Boolean,
      default: false  // 是否垂直布局
    }
  })
  
  // 🎯 样式类
  const itemClasses = computed(() => [
    'item-container',
    {
      'item-vertical': props.vertical,
      'item-horizontal': !props.vertical
    }
  ])
  </script>
  
  <style lang="scss" scoped>
  .setting-item {
    width: 100%;
    padding: 12px 0;
    
    &:not(:last-child) {
      border-bottom: 1px solid var(--el-border-color-extra-light);
    }
    
    // 🎯 水平布局（默认）
    &.item-horizontal {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      
      .setting-label {
        flex: 1;
        min-width: 0;
      }
      
      .setting-control {
        flex-shrink: 0;
      }
    }
    
    // 🎯 垂直布局
    &.item-vertical {
      display: flex;
      flex-direction: column;
      gap: 8px;
      
      .setting-label {
        width: 100%;
      }
      
      .setting-control {
        width: 100%;
      }
    }
    
    // 🎯 标签区域
    .setting-label {
      display: flex;
      align-items: center;
      gap: 8px;
      
      .label-text {
        font-size: 14px;
        color: var(--el-text-color-primary);
        font-weight: 500;
      }
      
      .help-icon {
        font-size: 14px;
        color: var(--el-text-color-placeholder);
        cursor: help;
        
        &:hover {
          color: var(--el-color-primary);
        }
      }
    }
    
    // 🎯 控件区域
    .setting-control {
      display: flex;
      align-items: center;
      gap: 8px;
    }
  }
  </style>